<script lang="ts" setup>
  import { SearchOutlined } from '@ant-design/icons-vue';
  import Space from '@sscd/space';
  import Button from '@sscd/button';
</script>

<template>
  <div class="demo">
    <div class="demo-title">图标按钮</div>
    <div class="demo-content">
      <Space wrap>
        <Button type="primary" shape="circle">
          <template #icon><SearchOutlined /></template>
        </Button>
        <Button type="primary" shape="circle">A</Button>
        <Button type="primary">
          <template #icon><SearchOutlined /></template>
          Search
        </Button>
        <Button shape="circle">
          <template #icon><SearchOutlined /></template>
        </Button>
        <Button>
          <template #icon><SearchOutlined /></template>
          Search
        </Button>
        <Button shape="circle">
          <template #icon><SearchOutlined /></template>
        </Button>
        <Button>
          <template #icon><SearchOutlined /></template>
          Search
        </Button>
        <Button type="dashed" shape="circle">
          <template #icon><SearchOutlined /></template>
        </Button>
        <Button type="dashed">
          <template #icon><SearchOutlined /></template>
          Search
        </Button>
        <Button href="https://www.google.com">
          <template #icon><SearchOutlined /></template>
        </Button>
        <br />
        <br />
        <Button type="primary" shape="circle" size="large">A</Button>
        <Button type="primary" size="large">
          <template #icon><SearchOutlined /></template>
          Search
        </Button>
        <Button size="large">
          <template #icon><SearchOutlined /></template>
          Search
        </Button>
        <br />
        <Button size="large">
          <template #icon><SearchOutlined /></template>
          Search
        </Button>
        <Button type="dashed" size="large">
          <template #icon><SearchOutlined /></template>
          Search
        </Button>
        <Button size="large" href="https://www.google.com">
          <template #icon><SearchOutlined /></template>
        </Button>
      </Space>
    </div>
  </div>
</template>
